<template>

  <page-header-wrapper>

    <template #extra>
      <a-button type="primary" @click="toDownLoad">
        获取批量导入模板
      </a-button>


      <a-upload :file-list="[]"  :custom-request="toUpload" style="margin-left: 10px" >
        <a-button> <a-icon type="upload" /> 上传 </a-button>
      </a-upload>

    </template>

    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline" style="margin-bottom: 5px;">
          <a-row :gutter="48">
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="订单状态">
                <a-select :default-value="null" @change="onOrderStateChange">
                  <a-select-option :value="null">全部</a-select-option>
                  <a-select-option :value="1">未支付</a-select-option>
                  <a-select-option :value="2">待发货</a-select-option>
                  <a-select-option :value="3">已发货</a-select-option>
                  <a-select-option :value="4">已收货</a-select-option>
                  <a-select-option :value="5">已取消</a-select-option>
                  <a-select-option :value="6">待审核</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--            <a-col :xl="6" :lg="8" :md="12" :xs="24">-->
            <!--              <a-form-item label="商品状态">-->
            <!--                <a-select :default-value="null" @change="handleUserState">-->
            <!--                  <a-select-option :value="null">-->
            <!--                    全部-->
            <!--                  </a-select-option>-->
            <!--                  <a-select-option :value="1">-->
            <!--                    使用中-->
            <!--                  </a-select-option>-->
            <!--                  <a-select-option :value="0">-->
            <!--                    已禁用-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-form-item label="每页条数">
                <a-select :default-value="5" @change="handlePageSize">
                  <a-select-option :value="value" v-for="value in pageSizeSelect" :key="value">
                    {{ value }}条/页
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :xl="6" :lg="8" :md="12" :xs="24">
              <a-button type="primary" @click="handleTableChange">查询</a-button>
            </a-col>
          </a-row>
        </a-form>


        <a-table :pagination="pagination" bordered
                 :data-source="data" :loading="loading"
                 size="small" :columns="columns"
                 @change="handleTableChange"
        >
          <div slot="action" slot-scope="text,record">
            <div style="display: inline-block;margin-left: 10px">
              <a-button type="link" size="small" @click="changeSpecial(record)">查看详情</a-button>

            </div>
          </div>
        </a-table>
      </a-card>
    </div>
  </page-header-wrapper>

</template>

<script>

import {getUser, updateUser} from "../../api/user";
import {getCommunity} from "@/api/community";
import {searchTypeAsTree} from "@/api/modules/TypeRequest";
import {searchGoodByPage} from "@/api/modules/GoodRequest";
import {downLoadTemplate, searchOrderByPage, uploadTemplate} from "@/api/modules/OrderActionRequest";
import router from '@/router'
import {notification} from "ant-design-vue";

const columns = [
  {
    "dataIndex": "orderNumber",
    "title": "订单编号",
  },
  {
    "dataIndex": "totalPrice",
    "title": "总支付(美元)",
  },
  {
    "dataIndex": "goodsPrice",
    "title": "商品价格(美元)",
  },
  {
    "dataIndex": "createAt",
    "title": "下单时间",
    sorter: function (rowA, rowB) {
      let startTime = new Date(rowA.createAt);
      let endTime   = new Date(rowB.createAt);
      return startTime.getTime() > endTime.getTime()
    }
  },
  // {
  //   "title": "商品分类",
  //   scopedSlots: {customRender: 'type'},
  // },
  // {
  //   "title": "门牌号",
  //   customRender(text, e) {
  //     let str = '';
  //     if (e.tower == undefined && e.unit == undefined) return str
  //     str += (e.tower || '') + ' / ' + (e.unit || '')
  //     if (e.address != null)
  //       str += '/' + e.address
  //     return str
  //   }
  // },
  {
    "dataIndex": "state",
    "title": "订单状态",
    customRender(text) {
      return ['待支付', '待发货', '已发货', '已接收', '已取消','待审核'][Number(text) - 1]
    }
  },
  {
    "title": "操作",
    scopedSlots: {customRender: 'action'},
  },

  // {
  //   "dataIndex": "isSpecial",
  //   "title": "是否为特殊用户",
  //   scopedSlots: {customRender: 'isSpecial'},
  // }
]

export default {
  name: "GoodsList",
  data() {
    return {
      search: {
        state: null
      },
      typeTreeList: [],
      typeMap: new Map(),
      data: [],
      columns: columns,
      loading: true,
      pagination: {
        pageSize: "10",
        current: 1,
        total: 0
      },
      pageSizeSelect: [
        '5', '10', '20', '50', '100'
      ],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      try {
        let data=JSON.parse(decodeURIComponent(this.$route.query.info))
        this.search = Object.assign({}, this.search, data.search)
        this.pagination = Object.assign({}, this.pagination, data.pagination)
      }catch (e){

      }
      await this.handleTableChange();
    },
    async toDownLoad(){
        await downLoadTemplate();
    },
    async toUpload(e){
      let _this = this;
      let form = new FormData();
      form.set('file', e.file);
      await uploadTemplate(form).then((res) => {
        notification.success({
          message:"上传成功"
        })
      }).catch((rea)=>{
        notification.warning(res)
      })
      return false
    },
    async toSearchType() {
      let _this = this;
      await searchTypeAsTree().then((res) => {
        if (res.status === 200) {
          _this.typeTreeList = [
            {id: null, type: '全部'}, ...res.data
          ];

          let arr = [...res.data]

          for (let i = 0; i < arr.length; i++) {
            _this.typeMap.set(arr[i].id, arr[i]);
            if (arr[i].children != null && arr[i].children.length > 0) {
              arr.push(...arr[i].children)
            }
          }

        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      }).catch((res) => {
        _this.$notification.warning({
          message: res.message
        })
      })
    },

    async handlePageSize(value) {
      this.pagination.pageSize = value.toString();
      await this.handleTableChange();
    },
    async handleTableChange(pagination) {
      this.loading = true;
      if (pagination != null) this.pagination.current = pagination.current
      await this.searchOrder();
      this.loading = false;
    },

    onCommunityChange(value) {
      this.search.communityId = value[0];
    },
    handleIsSpecialChange(e1) {
      this.search.isSpecial = e1
    },
    handleUserState(value) {
      this.search.status = value
    },
    changeSpecial(e) {
      router.push({
        path: '/order/orderInfo/' + e.id
      })
    },
    async searchOrder() {
      let _this = this;
      if (this.pagination.current == null) this.pagination.current = 1;
      searchOrderByPage(this.search.state != null ? {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        state: this.search.state,
      } : {current: this.pagination.current, size: this.pagination.pageSize}).then((res) => {
        if (res.status === 200) {
          _this.data = res.data.records
          _this.pagination.total = res.data.total
          _this.pagination.current = res.data.current
          _this.pagination.pageSize = res.data.size.toString()

          let newRoute=Object.assign({}, this.$route, {
            query: {
              info:encodeURIComponent(JSON.stringify({
                search: this.search,
                pagination: this.pagination,
              }))
            }
          })
          delete newRoute.path;
          delete newRoute.matched;
          delete newRoute.fullPath;
          delete newRoute.hash;
          delete newRoute.meta;
          console.log(newRoute)
          this.$router.push(newRoute)
        } else {
          _this.$notification.warning({
            message: res.message
          })
        }
      });
    },
    onOrderStateChange(value) {
      console.log(value)
      if (value == null) this.search.state = null
      else this.search.state = value;
    }
  }
}
</script>

<style scoped>

</style>